<template>
  <div class="home">
    <van-nav-bar title="首页"/>
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="ban in ban_list" :key="ban.id">
          <a :href="'https://'+ban.bannerUrl"><img :src="ban.pictureUrl" /></a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="notice">
      <div class="notice-head flex flex-align-center">
        平台公告
        <div class="badge flex flex-center">{{ msg_list.length }}</div>
      </div>
      <div class="notice-list">
        <div class="notice-item flex" v-for="msg in msg_list" :key="msg.id" @click="navigate(`/msg-detail?msg_id=${msg.id}`)">
          <div class="notice-icon">
            <van-icon name="chat"/>
          </div>
          <div class="notice-main flex-1">
            <div class="notice-coontent">{{ msg.title }}</div>
            <div class="notice-bottom flex flex-content-between">
              <div class="time">
                <van-icon name="clock-o"/>
                {{ msg.ctime }}
              </div>
              <div class="more flex flex-center">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {inject, ref} from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const $ajax:any = inject("$ajax")
const $api:any = inject("$api")
let msg_list:any = ref([]);

let ban_list:any = ref([]);
//公告
async function get_msg_list() {
  const data = await $ajax(
      {
        api: $api.msg_list,
      }
  )
  msg_list.value = data.data.messageList
}

get_msg_list()

//广告
async function get_ban_list() {
  const data = await $ajax(
      {
        api: $api.ban_list,
      }
  )
  ban_list.value = data.data.banList
}
get_ban_list()
const navigate = (path: any) => {
  router.push(path)
}
</script>

<style lang="less" scoped>
.home {
  background: #e2eeff;
  min-height: 100%;
  font-size: 0.16rem;
  padding: 0.16rem;
  padding-top: 0;

  :deep(.van-nav-bar) {
    background: #e2eeff;
    font-family: 'PingFang SC';
    font-size: 0.18rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .banner {
    height: 1.72rem;
    margin-top: 0.2rem;
    border-radius: 0.08rem;
    overflow: hidden;

    :deep(.van-swipe) {
      height: 100%;

      img {
        max-height: 100%;
        width: 100%;
      }
    }
  }

  .notice {
    margin-top: 0.27rem;

    .notice-head {
      height: 0.25rem;
      font-family: 'PingFang SC';
      font-size: 0.18rem;
      font-style: normal;
      font-weight: 400;
      line-height: normal;

      &::before {
        content: '';
        width: 0.03rem;
        background: #628cff;
        height: 0.14rem;
        margin-right: 0.06rem;
        border-radius: 0.4rem;
      }

      .badge {
        width: 0.15rem;
        height: 0.15rem;
        flex-shrink: 0;
        border-radius: 0.13rem;
        opacity: 0.4;
        background: #636f8f;
        color: #fff;
        font-size: 0.12rem;
        margin-left: 0.04rem;
      }
    }

    .notice-list {
      .notice-item {
        min-height: 0.74rem;
        background: #fff;
        border-radius: 0.04rem;
        padding: 0.06rem;
        margin-top: 0.16rem;

        .notice-icon {
          width: 0.2rem;
          font-size: 0.18rem;
          color: #628cff;
        }

        .notice-main {
          padding: 0 0.12rem;

          .notice-bottom {
            margin-top: 0.06rem;

            .time {
              color: #bfbfbf;
              font-size: 0.13rem;

              :deep(i) {
                margin-right: 0.03rem;
              }
            }

            .more {
              width: 0.78rem;
              height: 0.26rem;
              flex-shrink: 0;
              border-radius: 0.34rem;
              background: linear-gradient(99deg, #f1f4ff 1.64%, #e1e7fe 27%, #d5ebff 98.52%);
              color: #4e7dff;
              font-family: 'PingFang SC';
              font-size: 0.12rem;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }
          }
        }
      }
    }
  }
}
</style>
